import * as React from "react";
import classNames from "classnames/bind";
import * as styles from "./controls-view.css";
import { IWindowState } from "../../core/model";
import { winMinimize, winMaximize, winUnmaximize, winClose } from "../../utils/win-util";

const cx = classNames.bind(styles);

const closeIcon = <svg width="22px" height="30px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M529.066667 524.8l241.066666-241.066667c8.533333-8.533333 8.533333-21.333333 0-29.866666s-21.333333-8.533333-29.866666 0L499.2 494.933333 258.133333 253.866667c-8.533333-8.533333-21.333333-8.533333-29.866666 0s-8.533333 21.333333 0 29.866666L469.333333 524.8 228.266667 765.866667c-8.533333 8.533333-8.533333 21.333333 0 29.866666 4.266667 4.266667 10.666667 6.4 14.933333 6.4s10.666667-2.133333 14.933333-6.4L499.2 554.666667l241.066667 241.066666c4.266667 4.266667 10.666667 6.4 14.933333 6.4s10.666667-2.133333 14.933333-6.4c8.533333-8.533333 8.533333-21.333333 0-29.866666L529.066667 524.8z" /></svg>;
const minimizeIcon = <svg width="22px" height="30px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M768 533.333333H256c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333333h512c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333333z" /></svg>
const maximizeIcon = <svg width="22px" height="30px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M832 832H192V192h640v640z m-597.333333-42.666667h554.666666V234.666667H234.666667v554.666666z" /></svg>
const restoreIcon = <svg width="22px" height="30px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M855.466667 168.533333h-554.666667V277.333333H192v554.666667h554.666667v-108.8h108.8v-554.666667zM704 789.333333H234.666667V320h469.333333v469.333333z m108.8-108.8H746.666667V277.333333H343.466667V211.2h469.333333v469.333333z" /></svg>

export function ControlsView (props: { winState: IWindowState }) {
  const { winState } = props;
  const { isMaximize } = winState;

  return (
    <div className={cx('controls')}>
      <div className={cx('control-btn', 'is-show')} onClick={winMinimize}>
        {minimizeIcon}
      </div>
      <div className={cx('control-btn', { 'is-show': !isMaximize })} onClick={winMaximize}>
        {maximizeIcon}
      </div>
      <div className={cx('control-btn', { 'is-show': isMaximize })} onClick={winUnmaximize}>
        {restoreIcon}
      </div>
      <div className={cx('control-btn', 'danger', 'is-show')} onClick={winClose}>
        {closeIcon}
      </div>
    </div>
  );
}